import React, { useState, useEffect, useContext, forwardRef, useImperativeHandle } from 'react'
import IMTable from '../../../components/IMTable';
import { Button, Popover, Modal, message } from 'antd';
import usePagination from '../../../hooks/usePagination';
import useRequest from '../../../hooks/useRequest';
import { Context } from '../index';
import { ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal
interface Request {
    getPicList: (params: any) => Promise<any>
    delPic: (id: number) => Promise<any>
}
const getImgContent = (src: string) => <div style={{ width: '200px', height: '200px' }}>
    <img src={src} alt="" style={{ maxWidth: '100%', maxHeight: '100%' }} />
</div>
const columns = ({ handleDel }: any) => [
    {
        title: '图片ID',
        dataIndex: 'id',
        key: 'id',
        fixed: 'left' as any,
        width: 100
    },
    {
        title: '图片名称',
        dataIndex: 'pic_name',
        key: 'pic_name',
        width: 200
    },
    {
        title: '图片显示',
        dataIndex: 'img_url',
        key: 'img_url',
        width: 200,
        render: (text: string) => <Popover content={getImgContent(BASE_URL + text)}>
            <img src={BASE_URL + text} alt="" style={{ width: '30px', height: '30px' }} />
        </Popover>,
    },
    {
        title: '图片分类',
        dataIndex: 'classify',
        key: 'classify',
        width: 150,
        render: (text: any[]) => <span>{text.map(item => item.classify_name).join('/')}</span>
    },
    {
        title: '可提供分辨率',
        dataIndex: 'privide_resolution',
        key: 'privide_resolution',
        width: 100,
        render: (text: string) => <span>{text &&
            JSON.parse(text).join('/')}</span>

    },
    {
        title: '作者',
        dataIndex: 'author',
        key: 'author',
        width: 100
    },
    {
        title: '操作',
        dataIndex: 'control',
        key: 'control',
        fixed: 'right' as any,
        width: 120,
        render: (text: any, record: any) => <div>
            {/* <Button type="primary" style={{ marginRight: '10px' }} size="small"
                className="safety_btn" onClick={() => configPic(record)}>配置</Button> */}
            <Button type="primary" className="danger_btn" size="small" onClick={() => handleDel(record.id)}>刪除</Button>
        </div>
    },
]
const TableList = (props: any, ref: any) => {
    const request = useRequest<Request>({ modulePath: 'pic' })
    const { state, dispatch, ActionState } = useContext(Context)
    async function apiRun(params: any) {
        return request.getPicList({ ...params })
    }
    const formatData = async (res: any) => {
        return {
            total: res.data.total,
            data: res.data.list
        }
    }
    const { dataSource, pagination: { page, limit, total, onChange }, loading, getData }: any =
        usePagination({ apiRun, formatData, sizeLabel: 'limit', currentLabel: 'page' })

    const handleDel = (id: number) => {
        confirm({
            title: '确定删除该图片吗？',
            icon: <ExclamationCircleOutlined />,
            async onOk() {
                await request.delPic(id)
                message.success('删除成功')
                getData()
            },
        });
    }
    useImperativeHandle(ref, () => ({
        getData
    }))
    useEffect(() => {
        getData(state.search)
    }, [state.search])
    return <IMTable columns={columns({ handleDel })}
        dataSource={dataSource}
        pagination={{ current: page, pageSize: limit, total, onChange }}
        loading={loading}
        scroll={{ y: 'calc(100vh - 380px)' }}></IMTable>
}

export default forwardRef(TableList)